<template>
  <div class="cus_header">
    <div class="containter">
      <div class="title">
        <img src="../../assets/img/homeTitle.png" alt="华美英语实验学校" class="homeTitle">
      </div>
      <div class="containter_nav">
        <div class="one_containter_nav" @click="goHome()">首页</div>
        <div class="one_containter_nav" :class="[ navName ==='worker' ? 'navName' : '' ]" @click="goWork()">工作台</div>
        <div class="one_containter_nav" :class="[ navName ==='nav' ? 'navName' : '' ]" @click="goNav()">全部应用</div>
      </div>
      <div class="useName">
        <el-popover placement="top-start" title="" width="240" trigger="hover">
          <div class="popover-content">
            <div v-if="isHasPermissions('待办业务')" class="pointer" @click="goPage(`/toDoBusiness`)">
              <span class="icon iconfont icon-dot mg-r-10 theme-color-lightsalmon fz-10"></span>
              <span class="mg-r-10">审核即将超时</span>
              <span class="theme-color-lightsalmon ">({{ timeoutCount }})</span>
            </div>
            <div v-if="isHasPermissions('批量公布')" class="pointer mg-t-10"
              @click="goPage(`/announcementResults?status=ISSUE_FAILED`)">
              <span class="icon iconfont icon-dot mg-r-10 theme-color-lightcoral  fz-10"></span>
              <span class="mg-r-10">新入户卡签发失败 </span>
              <span class="theme-color-lightcoral ">({{ newCardRegistrationSignFailureCount }})</span>
            </div>
            <div v-if="isHasPermissions('待办业务')" class="pointer mg-t-10"
              @click="goPage(`/toDoBusiness?fullText=ExceedTheAge`)">
              <span class="icon iconfont icon-dot mg-r-10 theme-color-lightseagreen  fz-10"></span>
              <span class=" mg-r-10">即将超龄</span>
              <span class="theme-color-lightseagreen ">({{ exceedTheAgeCount }})</span>
            </div>
            <div v-if="isHasPermissions('接收申办业务')" class="pointer mg-t-10" @click="goPage(`/receiveApplicationServices`)">
              <span class="icon iconfont icon-dot mg-r-10 theme-color-purple  fz-10"></span>
              <span class="mg-r-10">待认领任务 </span>
              <span class="theme-color-purple ">({{ toClaimCount }})</span>
            </div>
            <div v-if="isHasPermissions('待办业务')" class="pointer mg-t-10" @click="goPage(`/toDoBusiness`)">
              <span class="icon iconfont icon-dot mg-r-10 theme-color-lightpink  fz-10"></span>
              <span class="mg-r-10">待办任务 </span>
              <span class="theme-color-lightpink">({{ toDoCounts }})</span>
            </div>
            <div v-if="isHasPermissions('批量公布')" @click="goPage(`/announcementResults?advent=true`)"
              class="pointer mg-t-10">
              <span class="icon iconfont icon-dot mg-r-10 theme-color-2f8cec  fz-10"></span>
              <span class="mg-r-10">公示完成超过三天未公布 </span>
              <span class="theme-color-2f8cec ">({{ stayPublishCount
              }})</span>
            </div>
          </div>
          <el-badge slot="reference" :is-dot="!(timeoutCount == 0 &&
              newCardRegistrationSignFailureCount == 0 &&
              exceedTheAgeCount == 0 &&
              toClaimCount == 0 &&
              toDoCounts == 0 && stayPublishCount == 0)
            " class="item">
            <span class="icon iconfont icon-yujing theme-color-2f8cec mg-r-10 mg-l-10 fz-10 theme-color-f5a34b"></span>
          </el-badge>
        </el-popover>
        <el-button type="text" style="margin-left: 10px" @click="loginOut">
          <span class="icon iconfont icon-tuichu theme-color-2f8cec mg-r-5 fz-8"></span>
          退出
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  name: "cusHeader",
  data() {
    return {
      navName: 'worker',
      BASE_URL: process.env.VUE_APP_BASE_URL,
      userName: this.$store.state.userInfo.displayName,
      name: "",
      webSocket: null,
      heartbeatTimer: null,
      redata: null,
      toClaimCount: 0, //待认领数量
      toDoCounts: 0, //待办数量
      stayPublishCount: 0, //公示完成超过三天未公布
      exceedTheAgeCount: 0, //超龄数量
      timeoutCount: 0, //临近办结数量
      newCardRegistrationSignFailureCount: 0, // 新入户卡签发失败
      permissions: {},

    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    employeeInfo() {
      return this.$store.state.employeeInfo;
    },
    navList() {
      return this.$store.state.navList;
    },
  },
  created() {
    this.$nextTick(() => {
      if (sessionStorage.getItem("currentEmployee")) {
        this.name = JSON.parse(sessionStorage.getItem("currentEmployee")).name;
      }
    });
  },
  activated() {
    this.$nextTick(() => {
      if (sessionStorage.getItem("currentEmployee")) {
        this.name = JSON.parse(sessionStorage.getItem("currentEmployee")).name;
      }
    });
  },

  methods: {
    goHome() {

    },
    goWork() {
      this.navName = 'worker'
      this.$router.push('/')
    },
    goNav() {
      this.navName = 'nav'
      this.$router.push('/userList')
    },
    isHasPermissions(name) {
      // 遍历this.navList跟this.navList的子集children 是否包含path
      let flag = false;
      this.navList.forEach((item) => {
        if (item.name === name) {
          flag = true;
        }
        if (item.children && item.children.length) {
          item.children.forEach((child) => {
            if (child.name === name) {
              flag = true;
            }
          });
        }
      });
      return flag;
    },
    // 跳转
    goPage(path) {
      this.$router.push(path);
    },
    async loginOut() {
      const res = await this.$axios.post("/graphql", {
        query: `mutation {
          loginoutScene {
            logout
          }
        }`,
      });
      if (!res.data.errors) {
        sessionStorage.clear();
        localStorage.clear();
        window.sessionStorage.clear();
        await this.$router.push('/login');
      }
    },
  },
  mounted() {},
};
</script>
<style scoped lang="scss">
.lineBottom {
  cursor: pointer;
  text-decoration: underline;
}

.popover-content {
  display: flex;
  flex-direction: column;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中，如果需要的话 */
}

.cus_header {
  width: 100%;
  background-color: #ffffff;
  color: #333;
  position: relative;
  box-sizing: border-box;
  z-index: 999;
  box-shadow: 0 3px 10px 0 rgba(184, 183, 183, 0.55);
  padding: 0 15px;

  .containter {
    width: 100%;
    height: 80px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      width: 280px;
      height: 80px;
      font-size: 0;
      object-fit: contain;

      img {
        width: 100%;
        height: auto;
      }

      display: flex;
      align-items: center;

      .line {
        width: 3px;
        height: 22px;
        margin: 0 15px;
      }

      .title-left {
        word-wrap: normal;

        .left-top {
          font-weight: 600;
          font-size: 22px;
        }

        .left-bottom {
          font-size: 7px;
        }
      }

      .title-right {
        font-size: 22px;
        font-weight: 600;
      }

      div {
        font-size: 18px;

        &:first-of-type {
          font-size: 22px;
        }
      }
    }

    .containter_nav {
      width: 300px;
      height: auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;


      .one_containter_nav {
        width: max-content;
        font-size: 18px;
        color: #6a6666;
        cursor: pointer;
      }
    }

    .icon-yujing,
    .icon-tuichu {
      font-size: 18px;
    }

    .icon-fuzhushuxian {
      font-size: 18px;
    }

    .icon-yonghu {
      font-size: 30px;
      vertical-align: sub;
    }
  }
}

.useName {
  width: 280px;
  height: 80px;
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  justify-content: flex-end;
  align-items: center;
}

.navName {
  color: #2C8EEF !important;
  font-weight: bold;
  box-sizing: border-box;
  padding-bottom: 10px;
  border-bottom: 10px;
  border-bottom: 5px solid #2C8EEF;
}
</style>
